<template>
  <div>
    <header class="bar bar-nav top-bar">
      <h1 class="t">百川名品</h1>
      <div v-if="goodslist.length>0">
        <span class="btn-m" @click="showAllEdit()" v-show="!manageFlag">编辑</span> <span class="btn-m" @click="hideAllEdit()" v-show="manageFlag">完成</span>
      </div>
    </header>
    <div class="content mb-100">
      <mt-cell-swipe  v-for="(goods,index) in goodslist" :key="index"
        :right="[
                  {
                    content: '移入收藏',
                    style: { background: 'lightgray', color: '#fff' },
                    handler: () => $messagebox('move')
                  },
                  {
                    content: '删除',
                    style: { background: 'red', color: '#fff' },
                    handler: () => del(goods.goodsId)
                  }
                ]
              "
            >
        <div class="car-box">
          <label class="label">
            <input type="checkbox" :value="goods.recId" v-model="selectArr" @click="selectItem($event,item,goods)">
            <span></span>
          </label>
          <div class="cart-detail">
            <router-link :to="{path:'/goodsdetail/',query:{id:goods.goodsId}}">
              <img :src="picUrl+ goods.goodsImage" class="cart-img">
            </router-link>
            <div class="ovh rel cart-txt">
              <h3>{{goods.goodsName}}</h3>
              <div class="bottom-line">
                <span class="price fl">￥{{goods.price}}</span>
                 <span class="num-box">
                    <img src="./images/bigsub-grayicon.svg" class="minus" @click="minusNum(goods)">
                    <input type="number" class="number" v-model="goods.quantity"/>
                    <img src="./images/bigadd-grayicon.svg" class="add" @click="addNum(goods)">
                 </span>
              </div>
            </div>

          </div>
        </div>

      </mt-cell-swipe>


      <div class="nolist" v-if="goodslist.length<1">
        <img src="./images/no-shop.svg">
        <span>哎呀，没东西，快去购物吧~~</span>
        <router-link to="/home">
        <div class="btn-go mt40">去购物</div>
        </router-link>
      </div>
    </div>
    <div class="jiesuan" v-if="cartList.length>0">
      <div class="js-l">
        <label class="label1" for="all">
        <input type="checkbox" name="all" id="all" @click="selectAll" ref="all"><span></span>全选
        </label>
      </div>
      <div class="js-m">
        <p class="sum">合计：<b>￥{{totalMoney | toYuan}}</b></p>
        <!--<p class="fz12 f6">（共计{{selectArr.length}}件，不含运费）</p>-->
      </div>
      <div class="js-r" @click="jiesuan">去结算</div>
    </div>

    <div class="foot-opration" v-show="manageFlag">
      <div class="js-l">
        <label class="label1" for="all">
          <input type="checkbox" name="all" id="all" @click="selectAll" ref="all">
          <span></span>全选 </label>
      </div>
      <div class="favo" @click="moveFave"> 移入收藏夹</div>
      <div class="js-r" @click="delMutiple">删除</div>
    </div>

    <!--优惠券-->
    <!--<v-addcart :isShow="isShow" :guige="guige" :gId="gId" :quantity="guige.quantity" :recId="recId" :dimg="dimg"></v-addcart>-->
    <v-coupon :isShowCoupon="isShowCoupon" :sId="sId"></v-coupon>
  </div>
</template>

<script>
//import addcart from '@/components/home/select'
import coupon from '@/components/goods/getcoupon'
import config from '@/config/config'
import getuser from '@/util/getuser'
import { CellSwipe } from 'mint-ui';
import Vue from 'vue'
Vue.component(CellSwipe.name, CellSwipe);
export default {
  components: {
//    'v-addcart': addcart,
    'v-coupon': coupon
  },
  data(){
    return {
      manageFlag: false,
      isShow: false,
      isShowCoupon: false,
      sameShop: false,
      selectArr: [],
      storeArr: [],
      cartList: [],
      dimg: '',
      totalMoney: 0,
      isSameStore: '',
      sId: '',
      gId: '',
      recId: '',
      guige: {},
      picUrl: config.picBaseUrl,
      userId:1307,
      goodslist:[]
    };
  },
  created() {
//    this.rightButtons = ;
  },
  mounted(){



    if (!this.userId) {
      this.$router.replace('/login')
    }else{
      this.getList()
    }

  },
  computed: {
    cartGoodsTatal(){
      var total = 0
      this.cartList.forEach(function (item, index) {
        total += item.childMenus.length;
      })
      return total;
    },
  },
  methods: {
//删除多个
    delMutiple(){
      var vm = this;
      layer.open({
        content: '您确定将选中商品移除购物车？'
        , btn: ['确定', '取消']
        , yes: function (index) {
          var loadindex = layer.open({type: 2, shadeClose: false});
          vm.$http.post(config.baseUrl + '/cart/deleteCart', {
            'userId': vm.userId,
            'recIds': vm.selectArr.toString()
          }, {
            headers: {},
            credientials: true,
            emulateJSON: true
          }).then(function (response) {
            layer.close(loadindex)
            if (response.data.code == 200) {
              //刷新页面
              vm.getList()
              vm.manageFlag=false
            } else {
              layer.open({
                content: response.data.msg,
                btn: ['知道了'],
              })
            }
          });
          layer.close(index);
        }
      })
    },
    //移入收藏夹
    moveFave(){
      console.log(this.selectArr);
      var products = []
      this.cartList.forEach((store, index) => {
        store.childMenus.forEach((goods, index) => {
          this.selectArr.forEach((item, index) => {
            if (goods.recId == item) {
              products.push(goods.goodsId)
            }
          })
        })
      })
      console.log(products);
      var loadindex = layer.open({type: 2, shadeClose: false});
      this.$http.post(config.baseUrl + '/cart/saveCollect', {
        'userId': this.userId,
        'products': products.toString(),
        'recIds': this.selectArr.toString()
      }, {
        headers: {},
        credientials: true,
        emulateJSON: true
      }).then(function (response) {
        layer.close(loadindex)
        var vm = this
        if (response.data.code == 200) {
          layer.open({
            content: '成功移入收藏夹',
            btn: ['好的'],
            yes: function (index) {
              //刷新页面
              layer.close(index)
              vm.getList()
              vm.manageFlag=false
            }
          })
        } else {
          layer.open({
            content: response.data.msg,
            btn: ['知道了'],
          })
        }
      });
    },
    getList(){
      var loadindex = layer.open({type: 2, shadeClose: false});
      this.$http.post(config.baseUrl + '/cart/productList', {
        'userId': this.userId
      }, {
        headers: {},
        credientials: true,
        emulateJSON: true
      }).then(function (response) {
        layer.close(loadindex)
        if (response.data.code == 200) {
          this.cartList = response.data.list;
          this.goodslist =  this.cartList[0].childMenus
          console.log(this.goodslist);

        }
      });
    },
    //单选
    selectItem(event, item, goods){
      var vm = this
      var self = event.target;
      if (!this.manageFlag) {
        //结算操作，计算价格，只能选中一个店的商品，其他的不能选
        if (self.checked) {
          //选中
          if (typeof goods.checked == 'undefined') {
            vm.$set(goods, 'checked', true)
          } else {
            goods.checked = true
          }
          if (this.selectArr.indexOf(goods.recId) == -1) {
            this.selectArr.push(goods.recId)
          }
          //只能选一个店
          if (this.storeArr.length > 0) {
            layer.open({
              content: '一次只能选择同一店铺商品结算'
              , btn: ['知道了'],
              yes: function (index) {
//                let i = vm.selectArr.indexOf(goods.goodsId)
                let i = vm.selectArr.indexOf(goods.recId)
                vm.selectArr.splice(i, 1)
                if (typeof goods.checked == 'undefined') {
                  vm.$set(goods, 'checked', false)
                } else {
                  goods.checked = false
                }
                vm.calcTotalMoney()
                layer.close(index)
              }
            })
          }
          if (!vm.isSameStore) {
            vm.isSameStore = item.storeId
          } else {
            if (vm.isSameStore != item.storeId) {
              layer.open({
                content: '一次只能选择同一店铺商品结算'
                , btn: ['知道了'],
                yes: function (index) {
                  let i = vm.selectArr.indexOf(goods.recId)
                  vm.selectArr.splice(i, 1)
                  if (typeof goods.checked == 'undefined') {
                    vm.$set(goods, 'checked', false)
                  } else {
                    goods.checked = false
                  }
                  vm.calcTotalMoney()
                  layer.close(index)
                }
              });
            }
          }
        } else {
          //未选中
          if (this.selectArr.indexOf(goods.recId) != -1) {
            var index = this.selectArr.indexOf(goods.recId)
            this.selectArr.splice(index, 1)
          }
          if (typeof goods.checked == 'undefined') {
            vm.$set(goods, 'checked', false)
          } else {
            goods.checked = false
          }
          this.storeArr = []

        }
        if (this.selectArr.length == item.childMenus.length) {
          if (vm.isSameStore == item.storeId) {
            this.storeArr[0] = item.storeId
          } else {
            this.storeArr.splice(this.storeArr.indexOf(item.storeId), 1)
          }
        }
        if (this.selectArr == 0) {
          vm.isSameStore = ''
        }
        this.calcTotalMoney()
      } else {
        //移入收藏，删除等
        if (self.checked) {
          if (typeof goods.checked == 'undefined') {
            vm.$set(goods, 'checked', true)
          } else {
            goods.checked = true
          }
          var cN = 0;
          item.childMenus.forEach(function (good, index) {
            console.log(good.checked);
            if (good.checked) {
              cN++
            }
          })
          if (cN == item.childMenus.length) {
            vm.storeArr.push(item.storeId)
          }
          if (vm.storeArr.length == this.cartList.length) {
            vm.$refs.all.checked = true
          }


        } else {
          if (typeof goods.checked == 'undefined') {
            vm.$set(goods, 'checked', false)
          } else {
            goods.checked = false
          }

          var cN = 0;
          item.childMenus.forEach(function (good, index) {
            if (good.checked) {
              cN++
            }
          })
          if (cN < item.childMenus.length) {
            if (vm.storeArr.indexOf(item.storeId) != -1) {
              vm.storeArr.splice(vm.storeArr.indexOf(item.storeId), 1)
            }
          }
          if (vm.storeArr.length < this.cartList.length) {
            vm.$refs.all.checked = false
          }
        }
      }
    },
    //全选同店商品
    selectSameStore(event, item){
      let self = event.target;
      var vm = this
      if (!this.manageFlag) {
        if (!vm.isSameStore) {
          vm.isSameStore = item.storeId
        }
        if (self.checked) {
          if (vm.isSameStore && vm.isSameStore != item.storeId) {
            self.checked = false
            layer.open({
              content: '一次只能选择同一店铺商品结算'
              , btn: ['知道了']
            })
            return;
          }

//            if (vm.storeArr.length > 0) {
//              vm.storeArr = []
//              vm.selectArr = []
//            }

          item.childMenus.forEach(function (obj, index) {
            if (vm.selectArr.indexOf(obj.recId) == -1) {
              vm.selectArr.push(obj.recId)
            }
            if (typeof obj.checked == 'undefined') {
              vm.$set(obj, 'checked', true)
            } else {
              obj.checked = true
            }
          })

        } else {
          vm.isSameStore = ''
          item.childMenus.forEach(function (obj, index) {
            let i = vm.selectArr.indexOf(obj.recId)
            vm.selectArr.splice(i, 1)
            if (typeof obj.checked == 'undefined') {
              vm.$set(obj, 'checked', false)
            } else {
              obj.checked = false
            }
          })
        }
        this.calcTotalMoney()
      } else {
        if (self.checked) {
          item.childMenus.forEach(function (obj, index) {
            if (vm.selectArr.indexOf(obj.recId) == -1) {
              vm.selectArr.push(obj.recId)
            }
            if (typeof obj.checked == 'undefined') {
              vm.$set(obj, 'checked', true)
            } else {
              obj.checked = true
            }
          })
          if (vm.storeArr.indexOf(item.storeId) == -1) {
            vm.storeArr.push(item.storeId)
          }

        } else {
          vm.isSameStore = ''
          item.childMenus.forEach(function (obj, index) {
            let i = vm.selectArr.indexOf(obj.recId)
            vm.selectArr.splice(i, 1)
            if (typeof obj.checked == 'undefined') {
              vm.$set(obj, 'checked', false)
            } else {
              obj.checked = false
            }
          })
          if (vm.storeArr.indexOf(item.storeId) != -1) {
            vm.storeArr.splice(vm.storeArr.indexOf(item.storeId), 1)
          }
        }

        if (vm.storeArr.length == this.cartList.length) {
          vm.$refs.all.checked = true
        } else {
          vm.$refs.all.checked = false
        }
      }

    },
    jiesuan(){

//      if(this.selectArr.length<1){
//        layer.open({
//          content: '请选择一件商品'
//          , btn: ['知道了']
//        })
//      } else {
//          var vm  = this
//        var delivery=[]
//        this.cartList.forEach(function (item, index) {
//          vm.selectArr.forEach(function(name,i){
//              if(item.recId==name){
//                delivery.push(item.deliveryTemplateId)
//              }
//          })
//        })
//
//        if(delivery.length>1){
//         var find = this.findSame(delivery)
//          if(find){
//            layer.open({
//              content: '您购买的订单包含不同的运费规则，请单独付款！'
//              , btn: ['知道了']
//            })
//            return ;
//          }
//        }

        this.$router.push({path: '/confirm_order/', query: {id: this.selectArr.toString()}})


    },
    findSame(arr) {
      arr.sort();
      for (var i = 0; i < arr.length - 1; i++) {
        if (arr[i] != arr[i + 1]) {
          return true;
        }
      };
      return false;
    },
    //全选页面
    selectAll(event){
      let self = event.target;
      let vm = this
      if (self.checked) {
        this.cartList.forEach(function (item, index) {
          vm.storeArr.push(item.storeId);
          item.childMenus.forEach(function (obj, index) {
            vm.selectArr.push(obj.recId)
          })
        })
        console.log(vm.selectArr);
        console.log('store:'+vm.storeArr);
      } else {
        vm.storeArr = []
        vm.selectArr = []
      }
    },
    editCarnum(goods, recId,event){
      if(goods.quantity=='' || goods.quantity<1){
        layer.open({
          content: '数量为必填且数量不能小于1'
          , skin: 'msg'
          , time: 1
        });
        event.currentTarget.focus()
      }else{
        this.calcTotalMoney()
        this.editCart(goods, recId)
      }

    },
    add(goods, recId){
      goods.quantity++;
      this.calcTotalMoney()
      this.editCart(goods, recId)
    },
    minus(goods, recId){
      if (goods.quantity > 1) {
        goods.quantity--
        this.calcTotalMoney()
        this.editCart(goods, recId)
      }
    },
    editCart(goods, recId){
      this.$http.post(config.baseUrl + '/cart/editCart', {
        'userId': this.userId,
        'recId': recId,
        'specId': '',
        'quantity': goods.quantity
      }, {
        headers: {},
        credientials: true,
        emulateJSON: true
      }).then(function (response) {
        if (response.data.code == 200) {
          //修改成功
        }
      });
    },
    calcTotalMoney(){
      var vm = this
      vm.totalMoney = 0;
      this.cartList.forEach(function (item, index) {
        item.childMenus.forEach(function (obj, index) {
          var money = 0;
          if (obj.checked == true) {
            money = obj.quantity * obj.price
          }
          vm.totalMoney += money
        })
      })

    },
    showAllEdit(){
      this.manageFlag = true
//      this.storeArr = []
//      this.selectArr = []
      this.$refs.all.checked = false
    },
    hideAllEdit(){
      this.manageFlag = false
      this.cartList.forEach(function (item, index) {
        if (typeof item.show != 'undefined') {
          item.show = false
        }
      })
      this.storeArr = []
      this.selectArr = []
      this.$refs.all.checked = false


    },
    showEdit(item){
      var vm = this;
      if (typeof item.edit == 'undefined') {
        vm.$set(item, 'edit', true)
      } else {
        item.edit = !item.edit
      }

      item.childMenus.forEach(function (goods, index) {
        if (!vm.manageFlag) {
          if (typeof goods.show == 'undefined') {
            vm.$set(goods, 'show', true)
          } else {
            goods.show = !goods.show
          }
        }
      })
    },
    del(id){
        alert(id)
      return ;
      var recIds = []
      this.cartList.forEach((store, index) => {
        store.childMenus.forEach((goods, index) => {
          if (goods.goodsId == id) {
            recIds.push(goods.recId)
          }
        })
      })
      var vm = this
      layer.open({
        content: '您确定将选中商品移除购物车？'
        , btn: ['确定', '取消']
        , yes: function (index) {

          var loadindex = layer.open({type: 2, shadeClose: false});
          vm.$http.post(config.baseUrl + '/cart/deleteCart', {
            'userId': vm.userId,
            'recIds': recIds.toString()
          }, {
            headers: {},
            credientials: true,
            emulateJSON: true
          }).then(function (response) {
            layer.close(loadindex)
            if (response.data.code == 200) {
              //刷新页面
//              vm.getList()

              vm.cartList.forEach((store, index) => {
                store.childMenus.forEach((goods, index) => {
                if (goods.goodsId == id) {
                  store.childMenus.splice(index, 1)
                }
                  if ( goods.checked ==true) {
                    goods.checked = false
                  }
               })
            })
              vm.storeArr = []
              vm.selectArr = []
              vm.isSameStore = ''
              vm.totalMoney=''
            } else {
              layer.open({
                content: response.data.msg,
                btn: ['知道了'],
              })
            }
          });
          layer.close(index);
        }
      });
    },
    showCouponWrap(storeId){
      this.isShowCoupon = true
      this.sId = storeId
//        console.log(this.sId);
    },
    closeCouponWrap(){
      this.isShowCoupon = false
    },
    showAdd(goods){
      this.guige = goods
      this.gId = goods.goodsId
      this.recId = goods.recId
      this.isShow = true
      this.dimg = goods.goodsImage

    },
    closeRule(){
      this.isShow = false
    },
    minusNum(goods){
        if (goods.quantity > 1) {
          goods.quantity--
        }
    },
    addNum(goods){
        goods.quantity++
    },
  },
  filters: {
    toYuan(val){
      if(val){
        return (val).toFixed(2);
      }else{
        return '';
      }
    }
  },
}
</script>


<style scoped>
  .ovh{ overflow:hidden; }
  .rel{ position:relative; }
  .top-bar{
    height:2.2rem;
    background:#fff;
  }
  .top-bar .t{
    line-height:2.2rem;
    color:#ffffff;
    font-size:.75rem;
    float:left;
    color: #555555;
    font-weight:normal;
  }
  .btn-m{
    position:absolute;
    right:1rem;
    top:.8rem;
    font-size:.75rem;
    color: #F74C4E;
  }
  .tip{
    color:#222222;
    font-size:.65rem;
    background-color:#f3cb8a;
    height:1.5rem;
    line-height:1.5rem;
    overflow:hidden;
    white-space:nowrap;
    text-overflow:ellipsis;
    padding:0 .5rem;
  }
  .tip span{
    color:#f23030;
  }
  .cart-wrap{
    margin-bottom:.5rem;
    background:#fff;
  }
  .cart-t{
    font-size:.75rem;
    color:#222222;
    padding:.5rem 0;
    border-bottom:1px solid #ddd;
  }
  .opr{
    font-size:.7rem;
    color:#666666;
    padding-right:.5rem;
  }
  .cart-list li{
    padding:.5rem 0;
    height:5.5rem;
    position:relative;
  }
  .cart-list li:after{
    content:'';
    position:absolute;
    height:0;
    width:calc(100% - 38px);
    border-bottom:1px solid #ddd;
    right:0;
    bottom:0;
  }
  .cart-list li:last-child:after{
    content:'';
    position:absolute;
    height:0;
    width:calc(100% - 38px);
    border-bottom:1px solid #fff;
    right:0;
    bottom:0;
  }
  .mint-cell-title{
    width:0;
  }
  .car-box{
    width:100%;
    padding:.5rem 0;
    height:5.5rem;
    text-align:left;
  }
  .cart-detail{
    overflow:hidden;
    padding-bottom:.5rem;
    /*border-bottom:1px solid #ddd;*/
    overflow:hidden;
  }
  .label{
    width:32px;
    height:100%;
    display:inline-block;
    float:left;
    text-align:left;
    position:relative;
  }
  .label input{
    opacity:0;
  }
  .label input + span{
    display:inline-block;
    width:20px;
    height:20px;
    background:url(images/icon-check.svg) 0 0 no-repeat;
    -webkit-background-size:100%; background-size:100%;
    position:absolute;
    left:.3rem;
    top:50%;
    margin-left:-10px;
    margin-top:-10px;
  }
  .label input:checked + span{
    background:url(images/icon-checked.svg) 0 0 no-repeat;
    -webkit-background-size:100%; background-size:100%;
  }
  .cart-img{
    width:4.5rem;
    height:4.5rem;
    border:1px solid #f7f7f7;
    float:left;
    margin-right:.5rem;
    border-radius:2px;
  }
  .cart-txt{
    height:4.6rem;
  }
  .cart-txt h3{
    font-size:.7rem;
    color:#222222;
    font-weight:normal;
    line-height:1.6;
    overflow:hidden;
  }
  .guige{
    font-size:.6rem;
    color:#666666;
    margin:.3rem 0;
  }
  .paisong{
    font-size:.6rem;
    color:#e80013;
  }
  .price{

    font-size:.7rem;
    color:#e80013;
  }
  .cart-num{
    position:absolute;
    right:.4rem;
    top:2rem;
    font-size:.7rem;
    color:#666;
  }
  .tip1{
    font-size:.6rem;
    color:#222222;
    padding:.5rem .5rem 0;
  }
  .tip1 span{ float:right;
    color:#e80013;
  }
  .modify-box{
    position:absolute;
    width:100%;
    height:4.5rem;
    background-color:#fff;
    right:0;
    top:0;
    z-index:2;
    /*display:table;*/
    /*display:none;*/
  }
  .editcart{
    width:75%;
    float:left;
    height:4.5rem;
    /*display:table-cell;*/
    padding-right:.5rem;
  }
  .cart-box{
    height:1.4rem;
    border:1px solid #ddd;
    position:relative;
    overflow:hidden;
  }
  .cart-box img{
    position:absolute;
    width:1.2rem;
    height:1.2rem;
    padding:.2rem .21rem;
    top:0;
  }
  .cart-box img.jian{
    left:0;
    border-right:1px solid #ddd;
  }
  .cart-box img.jia{
    right:0;
    border-left:1px solid #ddd;
  }
  .cart-box input{
    width:100%;
    text-align:center;
    vertical-align:middle;
    border:0;
    color:#222;
  }
  .gg{
    font-size:.6rem;
    color:#666666;
    padding:.2rem .8rem .2rem .2rem;
    background:#f4f4f4 url(images/down.svg) center right no-repeat;
    -webkit-background-size:.8rem; background-size:.8rem;
    margin-top:.8rem;
  }
  .del{
    height:100%;
    width:25%;
    float:right;
    height:4.5rem;
    line-height:4.5rem;
    background:#e80013;
    font-size:.7rem;
    color:#ffffff;
    text-align:center;
    /*display:table-cell;*/
    vertical-align:middle;
  }
  .pop-win{
    width:100%;
    height:calc(100% - 2.5rem);
    position:absolute;
    left:0;
    bottom:-100%;
    z-index:99;
    background-color:rgba(0, 0, 0, .4);
    transition:all .4s;
  }
  .get-coupon-wrap{
    background:#fff;
    width:100%;
    height:55%;
    position:absolute;
    left:0;
    bottom:2.5rem;
  }
  .c-t{
    font-size:.8rem;
    color:#222222;
    padding:.8rem;
  }
  .c-list{
    height:calc(100% - 5.2rem);
    overflow-x:hidden;
    overflow-y:auto;
  }
  .c-list li{
    width:100%;
    padding:.2rem .7rem;
    border-bottom:1px solid #ddd;
    overflow:hidden;
    display:table;
  }
  .get-c-l{
    display:table-cell;
    width:80%;
    text-align:left;
    font-size:.7rem;
  }
  .get-c-r{
    display:table-cell;
    width:20%;
    text-align:center;
    vertical-align:middle;
  }
  .get-c-r span{
    display:inline-block;
    border:1px solid #e80013;
    border-radius:4px;
    padding:.4rem .5rem;
    font-size:.7rem;
    color:#e80013;
    line-height:1;
  }
  .get-c-l p{
    margin-bottom:.2rem;
  }
  .fz20{ font-size:1rem; }
  .fz12{ font-size:.6rem; }
  .red{
    color:#e80013;
  }
  .f2{
    color:#222;
  }
  .f6{
    color:#666;
  }
  .btn-finish{
    width:100%;
    height:2.5rem;
    line-height:2.5rem;
    background:#e80013;
    font-size:.8rem;
    color:#ffffff;
    position:absolute;
    left:0;
    bottom:0;
  }
  .foot-opration{
    width:100%;
    height:2.5rem;
    position:absolute;
    left:0;
    bottom:2.5rem;
    background:#fff;
    display:table;
    z-index:102;
    border-top:1px solid #ddd;
  }
  .jiesuan{
    width:100%;
    height:2.5rem;
    position:absolute;
    left:0;
    bottom:2.5rem;
    background:#fff;
    display:table;
    z-index:101;
    box-shadow:0 0 2px rgba(0, 0, 0, .2);
  }
  .js-l{
    width:30%;
    display:table-cell;
    text-align:left;
    vertical-align:middle;
    font-size:.7rem;
    color:#222222;
  }
  .label1 input{
    opacity:0;
    position:absolute;
    left:0; top:0;
  }
  .label1 input + span{
    display:inline-block;
    vertical-align:middle;
    width:20px;
    height:20px;
    margin-right:.5rem;
    margin-left:13px;
    background:url(images/icon-check.svg) 0 0 no-repeat;
    -webkit-background-size:100%; background-size:100%;
  }
  .label1 input:checked + span{
    background:url(images/icon-checked.svg) 0 0 no-repeat;
    -webkit-background-size:100%; background-size:100%;
  }
  .js-m{
    width:45%;
    display:table-cell;
    vertical-align:middle;
  }
  .js-r{
    width:25%;
    display:table-cell;
    vertical-align:middle;
    background: #E93B3D;
    height:100%;
    text-align:center;
    font-size:.75rem;
    color:#ffffff;;
  }
  .favo{
    width:25%;
    display:table-cell;
    vertical-align:middle;
    background: #4A4A4A;
    height:100%;
    text-align:center;
    font-size:.75rem;
    color:#ffffff;;
  }
  .sum{
    font-size:.75rem;
    color:#222;
  }
  .sum b{
    font-size:.75rem;
    color:#f23030;
  }
  .mb-100{
    margin-bottom:5rem;
  }
  .nolist{
    width:100%;
    text-align:center;
    padding-top:3rem;
    color: #666;
  }
  .nolist span{
    display:block;
    font-size:.7rem;
    padding-top:.5rem;
  }
  .btn-go{
    display:inline-block;
    line-height:1.5;
    padding:.35rem 4rem;
    background: #FFFFFF;
    border: 1px solid #F74C4E;
    border-radius: 1rem;
    font-size: .75rem;
    color: #F74C4E;
    text-align: center;
  }
  .mt40{ margin-top:2rem;}

  .num-box{
    float:right;
    height:1.2rem;
    font-size:.7rem;
    overflow:hidden;
  }
  .add, .minus{
    float:left;
    display:inline-block;
  }
  .number{
    width:50px;
    float:left;
    display:inline-block;
    text-align:center;
    line-height:1.2rem;
    font-weight:normal;
    color:#666;
    border:0;
    background:none;
  }
  .minus{
    width:1.2rem;
  }
  .add{
    width:1.2rem;
    float:right;
  }
  .bottom-line{
    position:absolute;
    bottom:0;
    left: 0;
    width:100%;
    line-height:1.2rem;
  }
</style>
